<template>
  <div>
    <div class="moneybag">
      <div class="top_money">
        <div class="zinz">总资产</div>
        <div class="money_num">￥{{money}}</div>
      </div>
      <div>
        <div class="shouru_div" v-if="yaoisshow">
          <div v-for="(item,index) in yaolist" :key="index">
            <div class="list_num">
              <p v-if="item.log_type==2">支出</p>
              <p v-else>收入</p>
              <p class="list_name"> {{item.log_desc}}</p>
              <p class="time_p">{{item.log_add_time}}</p>
            </div>
            <div class="monenum_n" v-if="item.log_type==2">-{{item.log_amount}}</div>
            <div class="monenum_n" v-else>+{{item.log_amount}}</div>
          </div>
        </div>
        <div class="none_p" v-else>暂时未有收支记录!</div>
      </div>
    </div>
    <div class="button">
      <button open-type="share">邀请好友</button>
      <div class="tixian" @click="tixianmni">立即提现</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: "",
      headerCode: "",
      yaoisshow: false,
      yaolist: []
    };
  },
  methods: {
    onShows() {
      // 设置头
      wx.setNavigationBarTitle({
        title: "我的钱包"
      });
      wx.getStorage({
        key: "koken",
        success: res => {
          this.headerCode = res.data;

          // 获取支出列表
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/getwallet",
            method: "post",
            header: {
              Authorization: "Bearer " + this.headerCode,
              "X-Requested-With": "xmlhttprequest"
            },
            success: res => {
              if (res.data.code == 200) {
                console.log(res);
                wx.stopPullDownRefresh();
                this.money = res.data.data.wallet_amount;
                if (res.data.data.wallet_log.length == 0) {
                  this.yaoisshow = false;
                } else {
                  this.yaoisshow = true;
                  this.yaolist = res.data.data.wallet_log;
                  this.yaolist.forEach(element => {
                    element.log_add_time=element.log_add_time.substring(0,10);
                  });
                }
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        }
      });
    },
    //提现
    tixianmni() {
      if (this.money < 100) {
        wx.showToast({
          title: "余额小于100，暂不支持提现！",
          icon: "none",
          duration: 1000,
          mask: true
        });
      } else {
        wx.request({
          url: "https://qpi.zhaoshengku.net/index/member/putwithdraw",
          data: {
            amount: this.money
          },
          method: "post",
          header: {
            Authorization: "Bearer " + this.headerCode
          },
          success: res => {}
        });
      }
    }
  },
  onShow() {
    this.onShows();
  },
  onPullDownRefresh() {
    this.onShows();
  },
  onShareAppMessage: function(res) {
    let users = wx.getStorageSync("user");
    if (res.from === "button") {
      return {
        title: "招生库",
        path:
          "/pages/loginRegister/main?id=" +
          this.$store.state.myxinxi.info_member_id,
        imageUrl:
          "https://www.zhaoshengku.net/fenxiangbeijingdetu.jpg",
        success: function(res) {
          wx.showToast({
            title: "转发成功",
            icon: "true",
            duration: 1000,
            mask: true
          });
        },
        fail: function(res) {
          wx.showToast({
            title: "转发失败",
            icon: "none",
            duration: 1000,
            mask: true
          });
        }
      };
    }
  }
};
</script>

<style>
.shouru_div > div {
  display: flex;
  align-items: center;
  height: 130rpx;
  justify-content: space-between;
  margin-top: 20rpx;
}
.shouru_div > div .list_num{
  flex:1;
}
.shouru_div > div .list_num > p {
  font-size: 34rpx;
  color: #333;
  font-weight: bold;
  width: 100%;
  white-space:nowrap;
  white-space:nowrap;
  white-space:nowrap;
}
.shouru_div > div .list_num >.list_name{
  color: #999;
  font-size: 28rpx;
}
.shouru_div > div .list_num>.time_p{
  font-size: 24rpx;
  color:#999;
}
.shouru_div > div .monenum_n {
  color: #f24724;
  font-size: 40rpx;
  font-weight: bold;
}
.moneybag {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  padding-bottom: 150rpx;
}
.moneybag .top_money {
  width: 100%;
  height: 360rpx;
  background: #0081ff;
  padding: 80rpx 60rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}
.top_money .zinz {
  font-size: 30rpx;
  color: #fff;
}
.top_money .money_num {
  font-size: 66rpx;
  color: #fff;
  margin-top: 40rpx;
}
.middle_money {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  background: #e5e5e5;
  margin-top: 20rpx;
  text-align: center;
  color: #666;
  font-size: 30rpx;
  border: 1px solid #e5e5e5;
  border-radius: 10rpx;
}
.none_p {
  color: #666;
  font-size: 30rpx;
  width: 100%;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
}
.button {
  display: flex;
  width: 100%;
  height: 130rpx;
  align-items: center;
  padding: 20rpx 40rpx;
  justify-content: space-between;
  box-sizing: border-box;
  font-size: 35rpx;
  position: fixed;
  bottom: 0rpx;
  border-top: 1rpx solid #eee;
  background: #fff;
  z-index: 2222222;
}
.button > div,
.button > button {
  width: 40%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.button > .tixian {
  background: rgba(0, 129, 255, 1);
  color: #fff;
}
button:after {
  border: none;
  background: none;
}
button {
  background: none;
}
</style>
